<script setup>
import { computed } from 'vue'
const props = defineProps({
    filterable: {
        type: Boolean,
        default: true
    },
    placeholder: {
        type: String,
        default: '请选择'
    },
    clearable: {
        type: Boolean,
        default: true
    },
    options: {
        type: Array,
        default: () => []
    },
    selectProps: {
        type: Object,
        default: () => ({
            label: 'label',
            value: 'value'
        })
    },
    modelValue: {
        type: [String, Number, Array],
        default: ''
    },
    full: {
        type: Boolean,
        default: false
    },
    inputWidth: {
        type: String,
        default: '220px',
        validator: (value) => value.includes('px')
    },
    multiple: {
        type: Boolean,
        default: false
    },
    collapseTags: {
        type: Boolean,
        default: false
    },
    collapseTagsTooltip: {
        type: Boolean,
        default: false
    },
    maxCollapseTags: {
        type: Number,
        default: 1
    }
})
const emit = defineEmits(['update:modelValue', 'change'])
const selectOptions = (val) => {
    emit('update:modelValue', val)
    emit('change', val)
}
const selectStyle = computed(() => ({ 'width': props.inputWidth }))
</script>

<template>
    <el-select-v2 :model-value="modelValue" :options="options" :props="selectProps" :placeholder="placeholder"
        :clearable="clearable" :filterable="filterable" :multiple="multiple" :collapse-tags="collapseTags"
        :collapse-tags-tooltip="collapseTagsTooltip" :max-collapse-tags="maxCollapseTags" @change="selectOptions"
        :style="selectStyle" :class="[full ? 'full-box-class' : '']" />
</template>

<style scoped lang="scss">
.full-box-class {
    width: 100% !important;
}
</style>